<template>
  <div class="c-editor-zoom-bar__container">
    <a-flex align="center" justify="center">
      <a-tooltip>
        <template #title>缩小</template>
        <ZoomOutOutlined
          class="c-editor-zoom-bar__button-icon"
          @click="setZoom(-0.1, 'click')"
        />
      </a-tooltip>
      <a-select
        v-model:value="zoom"
        placement="topLeft"
        :bordered="false"
        @change="(val: number) => setZoom(val, 'select')"
      >
        <a-select-option :value="4">400%</a-select-option>
        <a-select-option :value="2">200%</a-select-option>
        <a-select-option :value="1">100%</a-select-option>
        <a-select-option :value="0.5">50%</a-select-option>
      </a-select>
      <a-tooltip>
        <template #title>放大</template>
        <ZoomInOutlined
          class="c-editor-zoom-bar__button-icon"
          @click="setZoom(0.1, 'click')"
        />
      </a-tooltip>
      <a-tooltip v-if="props.myRole === boardRole.Viewer">
        <template #title>拖拽画布</template>
        <DragOutlined class="c-editor-zoom-bar__button-icon icon__click" />
      </a-tooltip>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import {
  ZoomInOutlined,
  ZoomOutOutlined,
  DragOutlined,
} from '@ant-design/icons-vue';
import { inject, ref } from 'vue';
import { IEditor } from '@/types/global';
import { boardRole } from '@/utils/Const.ts';

const props = defineProps({
  myRole: {
    type: Number,
    required: true,
  },
});

// 白板编辑器对象，操作画布
const canvasEditor: unknown | IEditor = inject('canvasEditor');
// 缩放参数
const zoom = ref(1);
const setZoom = function (val: number, type: string) {
  const width =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  const height =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;
  canvasEditor.setCenterPoint(width / 2, height / 2);
  canvasEditor.setZoom(val, type);
};
</script>

<style scoped lang="scss">
.c-editor-zoom-bar__container {
  position: fixed;
  bottom: 15px;
  left: 15px;
  background-color: #fff;
  z-index: 1000;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
  padding: 5px;
  .c-editor-zoom-bar__button-icon {
    cursor: pointer;
    font-size: 18px;
    padding: 8px;
    user-select: none;
    &:hover {
      background: rgba(185, 185, 185, 0.2);
    }
  }
  .icon__click {
    color: #108ee9;
    background: rgba(16, 142, 233, 0.1);
  }
}
</style>
